<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SVG</title>
    <script src="scripts/snap.svg.js"></script>
</head>

<body>
    <svg id="svgout" width="1600" height="1600">
        <circle cx='0' cy='0' r='10' fill='red' stroke='none' />
        <defs>
            <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
                <path d="M2,2 L2,11 L10,6 L2,2" style="fill:black" stroke='rgb(34, 180, 83)'/>
            </marker>
        </defs>
        <path d='M100,100 L200,300' stroke='rgb(34, 180, 83)' stroke-width="4" style="marker-end: url(#markerArrow);"></path>
        <path d='M100,100 L150,60' stroke='rgb(34, 180, 83)' style="marker-end: url(#markerArrow);"></path>
        <path d='M100,100 C150,200 250,200 300,100 ' fill="none"
              stroke='rgb(34, 180, 83)' style="marker-end: url(#markerArrow);"></path>
        <g id="new" transform="translate(600 50)">
            <ellipse rx="50" ry="30" fill="yellow" stroke="blue" stroke-width="3"/>
            <text x="0" y="5" font-size="28" text-anchor="middle">new</text>
        </g>
        <g id="young" transform="translate(200 150)"/>
        <g id="old" transform="translate(200 620)"/>
    </svg>
    <script>
        let s = Snap("#svgout");
        let offset = 50;
        let g = s.g().attr({ stroke: 'gray' });
        for (let i = 0; i <=1600 / offset; i++) {
            g.line(i * offset, 0, i * offset, 1600)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.line(0, i * offset, 1600, i * offset)
                .attr({ "stroke-width": '1', "stroke-dasharray": "5, 5" });
            g.text(0, i * offset, i * offset);
            g.text(i * offset, 20, i * offset);
        }
    </script>
</body>

</html>